<template>
  <div class="ic-page-container">
    <a-page-header
      :ghost="false"
      :title="title"
      :sub-title="subTitle"
      :breadcrumb="{
        props: {
          routes: currentRoutes,
          itemRender: ({ h, route}) => {
            if (route.path) {
              return h('NuxtLink', {
                props: {
                  to: route.path
                }
              }, route.breadcrumbName)
            }
            return h('a', route.breadcrumbName)
          }
        }
      }"
    >
      <template #extra>
        <slot name="extra" />
      </template>
    </a-page-header>
    <div class="ic-page-main">
      <slot />
    </div>
  </div>
</template>
<script lang="ts">
import { State } from 'vuex-class'
import { Component, Prop, Vue } from 'vue-property-decorator'

import { ModuleEnum } from '@/enums/module.enum'
import { AppState } from '@/types/app.state'

interface BreadcrumbRoute {
  path: string;
  breadcrumbName: string;
}

@Component
export default class PageContainer extends Vue {
  @Prop({ default: () => [] })
  readonly routes!: BreadcrumbRoute[]

  @Prop({ required: true })
  readonly title!: string

  @Prop()
  readonly subTitle!: string

  @State('app')
  readonly app!: AppState

  get currentRoutes (): BreadcrumbRoute[] {
    let rootRoute: BreadcrumbRoute | undefined
    const { module } = this.app
    if (module === ModuleEnum.Console) {
      rootRoute = {
        path: '/console',
        breadcrumbName: '控制台'
      }
    } else if (module === ModuleEnum.Monitor) {
      rootRoute = {
        path: '/monitor',
        breadcrumbName: '监控中心'
      }
    } else if (module === ModuleEnum.Maintain) {
      rootRoute = {
        path: '/maintain',
        breadcrumbName: '运维保养'
      }
    } else if (module === ModuleEnum.Settings) {
      rootRoute = {
        path: '/settings',
        breadcrumbName: '系统设置'
      }
    }
    if (rootRoute) {
      return [rootRoute, ...this.routes]
    }
    return [...this.routes]
  }
}
</script>
<style lang="less" scoped>
.ic-page-main {
  padding: 24px 24px 0;
}
</style>
